<template>
	<view>
		<view class="shops-list">
			<block v-for="(item, index) in dataList" :key="index">
				<view class="tui-item-box flex" style="flex-direction:column;display: flex;margin-top: 10px;" hover-class="hover"
					:hover-start-time="150" @tap="goodsDetail(item)">
					<image class="tui-img" :src="item.listPicUrl" mode="widthFix" />
					<div style="display: flex;flex-direction: row;justify-content: space-between;">
						<div class="flex flex-col" style="flex: 8;">
							<view class="tui-sub-title">{{item.name || ''}}</view>
							<view class="tui-sub-title">报名截至：{{item.endTime || ''}}</view>
							<view class="tui-sub-title">
								<tui-icon name="gps" size="18"></tui-icon>
								{{item.address || ''}}
								<!-- <tui-icon name="clock" size="18" style="margin-left: 10rpx;"></tui-icon>
								{{item.signupTime || ''}} -->
							</view>
						</div>
						<div class="flex align-start pd-l-5" style="flex: 2;">
							<div v-if="item.status ==1" class="tui-cart2 flex justify-center align-center" style="align-self:center;">未开始</div>
							<div v-if="item.status ==2" class="tui-cart2 flex justify-center align-center" style="align-self:center;">结束</div>
							<div v-if="item.status ==0" class="tui-cart2 flex justify-center align-center" style="align-self:center;">报名</div>
						</div>
					</div>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		components: {},
		data() {
			return {
				dataList: [],
			};
		},
		onShow: function() {
			// 页面显示
			let that = this;
			this.getDataList();
		},
		onLoad: function() {
			uni.setNavigationBarTitle({    
				title: '赛事活动'
			});
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			if (!uni.getStorageSync('token')) {
				uni.login({
					success: function(res) {
						if (res.code) {
							util.request('auth/' + res.code).then(res => {
								if (res.code === 0) {
									//存储用户信息
									uni.setStorageSync('userInfo', res.userInfo);
									uni.setStorageSync('token', res.token);
									uni.setStorageSync('userId', res.userId);
								} else {
									util.toast(res.msg)
								}
							});
						}
					}
				});
			}
			// #endif
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		},
		onShareTimeline: function() {
			return {
				title: app.globalData.projectName,
				path: '/pages/index/index'
			}
		},
		onShareAppMessage: function() {
			return {
				title: app.globalData.projectName,
				path: '/pages/index/index'
			}
		},
		methods: {
			getDataList() {
				var that = this
				util.request('activities/list', {
					shopsType: '1'
				}).then(function(res) {
					if (res.code == 0) {
						that.dataList = res.data.records
					}
				});
			},
			goodsDetail: function(item) {
				uni.navigateTo({
					url: '/pagesA/activities/signup?id=' + item.id+'&title='+item.name
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.shops-list {
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin: 0rpx 20rpx 20rpx 20rpx;
	}

	.tui-desc {
		display: flex;
		align-items: flex-end !important;
		box-sizing: border-box;
		margin-top: 5rpx;
		font-size: 24rpx;
	}

	.tui-item-box {
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.3);
		overflow: hidden;
		padding: 0rpx;
		width: 700rpx;
	}

	.tui-img {
		width: 100%;
		height: 200rpx;
		display: block;
	}

	.tui-sub-title {
		font-weight: 400;
		padding-left: 10rpx;
		color: #333333;
		// font-size: 24rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin: 10rpx 0rpx;
	}

	.tui-sale-price {
		font-weight: 600;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3B30;
	}
	.tui-cart2{
		padding: 6rpx 0rpx;
		width: 150rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #DC5B00;
		border-radius: 30rpx;
	}
</style>